<template>
  <div>
  <div class="u-main">
    <div id="tab_menu">
      <ul class="u-tab clearfix">
        <li class="current"><a>个人详细信息</a></li>
      </ul>
    </div>
    <div id="tab_box">
      <div class="u-form-wrap">
        <div class="uf-tips">
          <span class="red">*</span> 为必填项，所有资料均会严格保密。
        </div>
        <br />
        <el-tag>用户信息</el-tag>
        <hr>
        <div class="block">
          <span class="demonstration" >您的账户完整度</span>
          <el-rate
            v-model="integrity"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
          </el-rate>
        </div>
        <br />
        <el-form ref="form" :model="user" label-width="80px" size="30px">
          <el-form-item label="昵称">
            <i class="el-icon-edit"></i>
            <el-input style="width:505px;" v-model="user.userNickname"></el-input>
            <el-button type="primary" icon="el-icon-loading" @click="changeUserInfo">修改</el-button>
          </el-form-item>
          <el-form-item label="手机号">
            <i class="el-icon-phone"></i>
            <el-input style="width:505px;" v-model="user.userPhone"></el-input>
            <el-button type="primary" icon="el-icon-loading" @click="changeUserInfo">修改</el-button>
          </el-form-item>
          <el-form-item label="真实姓名">
            <i class="el-icon-user-solid"></i>
            <el-input style="width:505px;" v-model="user.userRealname"></el-input>
            <el-button type="primary" icon="el-icon-loading" @click="changeUserInfo">修改</el-button>
          </el-form-item>
          <el-form-item label="身份证号">
            <i class="el-icon-picture-outline-round"></i>
            <el-input style="width:505px;" v-model="user.userIdcard"></el-input>
            <el-button type="primary" icon="el-icon-loading" @click="changeUserInfo">修改</el-button>
          </el-form-item>
          <el-form-item label="交易密码">
            <i class="el-icon-s-cooperation"></i>
            <el-input style="width:505px;" v-model="user.userPaypwd"></el-input>
            <el-button type="primary" icon="el-icon-loading" @click="changeUserInfo">修改</el-button>
          </el-form-item>
          <el-form-item label="电子邮件">
            <i class="el-icon-s-order"></i>
            <el-input style="width:505px;" v-model="user.userEmail"></el-input>
            <el-button type="primary" icon="el-icon-loading" @click="changeUserInfo">修改</el-button>
          </el-form-item>
          <el-form-item label="登录密码">
            <i class="el-icon-s-cooperation" ></i>
            <el-input style="width:505px;" v-model="user.userPassword"></el-input>
            <el-button type="primary" icon="el-icon-loading" @click="changeUserInfo">修改</el-button>
          </el-form-item>
        </el-form>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "",
      data() {
        return {
          user:{userAccount:"",
            userAmount: "",
            userCode: "",
            userEmail:"",
            userGetmoney: "",
            userHead: "",
            userId: "",
            userIdcard: "",
            userIntergal: "",
            userNickname: "",
            userPassword: "",
            userPaypwd: "",
            userPhone: "",
            userRealname: "",
            userRegistertime: "",
            userSex: ""},
            integrity:0
        }
      },
      methods:{
        changeUserInfo:function () {
         this.axios.post("/api/userHomePageController/changUserInfo",{
           userAccount:this.user.userAccount,
           userAmount:this.user.userAmount,
           userCode:this.user.userCode,
           userEmail: this.user.userEmail,
           userGetmoney:this.user.userGetmoney,
           userHead:this.user.userHead,
           userId:this.user.userId,
           userIdcard:this.user.userIdcard,
           userIntergal:this.user.userIntergal,
           userNickname:this.user.userNickname,
           userPassword:this.user.userPassword,
           userPaypwd:this.user.userPaypwd,
           userPhone:this.user.userPhone,
           userRealname:this.user.userRealname,
           userRegistertime:this.user.userRegistertime,
           userSex:this.user.userSex
         }).then(data=>{
           if(data.data==0){
             alert("修改成功")
           }
         })
        }
      },
      //初始化查询信息
      created() {
        this.axios.get("/api/userHomePageController/getUserInfoById",{}).then(data=>{
          this.user=data.data
        })
        //判断用户账户完整度
        if(this.user.userNickname!=null){
          this.integrity=this.integrity+0.75
        }if(this.user.userPhone!=null){
          this.integrity=this.integrity+0.75
        }if(this.user.userRealname!=null){
          this.integrity=this.integrity+0.75
        }if(this.user.userIdcard!=null){
          this.integrity=this.integrity+0.75
        }if(this.user.userPaypwd!=null){
          this.integrity=this.integrity+0.75
        }if(this.user.userEmail!=null){
          this.integrity=this.integrity+0.75
        }if(this.user.userPassword!=null){
          this.integrity=this.integrity
        }
      }


    }
</script>


<style scoped>
  @import  '../../assets/usercss/css/UserCSS.css';
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
